@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Space+Grotesk:wght@400;700&display=swap");
@import "tailwindcss";
@plugin '@tailwindcss/typography';

@theme {
  /* Neobrutalism palette */
  --color-primary: #ee8a6b;
  /* Coral */
  --color-secondary: #ffd166;
  /* Mustard */
  --color-background: #f9f6ee;
  /* Off-white */
  --color-green: #2e7d32;
  /* Forest Green */
  --color-teal-green: #4e9a7d;
  /* Teal Green */
  --color-teal: #4ea9a9;
  /* Teal */
  --color-light-teal: #75ada1;
  /* Light Teal */
  --color-blue: #1976d2;
  /* Blue */
  --color-light-blue: #629ec6;
  /* Light Blue */
  --color-cyan: #aeeeee;
  /* Light Cyan */

  --color-orange: #c98c43;
  /* Orange */
  --color-red: #d14b3a;
  /* Red */


  --shadow-neo: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  --text-shadow-neo:
    6px 6px 0px rgba(0, 0, 0, 1),
    3px 3px 0px rgba(0, 0, 0, 1),
    -3px 3px 0px rgba(0, 0, 0, 1),
    3px -3px 0px rgba(0, 0, 0, 1),
    -3px -3px 0px rgba(0, 0, 0, 1);

  --animate-wobble: wobble 2.4s ease-in-out infinite;

  @keyframes wobble {

    0%,
    100% {
      transform: rotate(-1.5deg) translateY(0) scale(1);
    }

    25% {
      transform: rotate(1deg) translateY(-2px) scale(1.02);
    }

    50% {
      transform: rotate(-0.5deg) translateY(1px) scale(0.995);
    }

    75% {
      transform: rotate(1.5deg) translateY(-1px) scale(1.01);
    }
  }
}

body {
  font-family: "IBM Plex Mono", system-ui, "Noto Color Emoji", monospace;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.03' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

p {
  font-family: system-ui, "Noto Color Emoji", sans-serif;
}

.astro-code {
  background-color: var(--color-background) !important;
  @apply pb-3
}

@layer utilities {

  /* Styling for inline code */
  .prose code:not(pre code) {
    @apply bg-background/60 px-1.5 pt-0.5 rounded-sm
  }

  /* Remove backticks around inline code generated by @tailwindcss/typography */
  .prose :not(pre)>code::before,
  .prose :not(pre)>code::after {
    content: none !important;
  }

  /* Styling for code blocks with language labels */
  .prose pre[data-language]:not([data-language="plaintext" i]):not([data-language="text" i]):not([data-language="plain" i]):not([data-language="none" i]) {
    @apply relative pt-10;
  }

  .prose pre[data-language]:not([data-language="plaintext" i]):not([data-language="text" i]):not([data-language="plain" i]):not([data-language="none" i])::before {
    content: '<<<' attr(data-language);
    @apply absolute top-0 left-0 w-full px-4 py-1.5 text-sm font-bold border-b-3 border-black bg-secondary;
  }

  /* Brand colors for the language title bar (case-insensitive matches).
     Keep this AFTER the base pre[data-language] rules so it overrides. */
  .prose pre:is([data-language="js" i], [data-language="javascript" i])::before {
    background: #f7df1e !important;
    color: #000;
  }

  .prose pre:is([data-language="ts" i], [data-language="typescript" i])::before {
    background: #3178c6 !important;
    color: #fff;
  }

  .prose pre:is([data-language="jsx" i], [data-language="tsx" i], [data-language="react" i])::before {
    background: #61dafb !important;
    color: #111;
  }

  .prose pre:is([data-language="vue" i])::before {
    background: #41b883 !important;
    color: #111;
  }

  .prose pre:is([data-language="svelte" i])::before {
    background: var(--color-red) !important;
    color: #fff;
  }

  .prose pre:is([data-language="html" i])::before {
    background: #e34f26 !important;
    color: #fff;
  }

  .prose pre:is([data-language="css" i])::before {
    background: var(--color-blue) !important;
    color: #fff;
  }

  .prose pre:is([data-language="sass" i], [data-language="scss" i])::before {
    background: #c6538c !important;
    color: #fff;
  }

  .prose pre:is([data-language="bash" i], [data-language="sh" i], [data-language="shell" i], [data-language="zsh" i], [data-language="ini" i], [data-language="conf" i])::before {
    background: #4EAA25 !important;
    color: #fff;
  }

  .prose pre:is([data-language="python" i], [data-language="py" i])::before {
    background: #3776ab !important;
    color: #fff;
  }

  .prose pre:is([data-language="go" i], [data-language="golang" i])::before {
    background: #81ccdf !important;
    color: #111;
  }

  .prose pre:is([data-language="rust" i])::before {
    background: #000 !important;
    color: #fff;
  }

  .prose pre:is([data-language="php" i])::before {
    background: #777bb4 !important;
    color: #fff;
  }

  .prose pre:is([data-language="json" i])::before {
    background: #252525 !important;
    color: #fff;
  }

  .prose pre:is([data-language="yaml" i], [data-language="yml" i])::before {
    background: #d45d61 !important;
    color: #fff;
  }

  .prose pre:is([data-language="ini" i], [data-language="conf" i])::before {
    background: #3e474a !important;
    color: #fff;
  }




  /* Blockquote customizations */
  .prose blockquote {
    quotes: none;
  }

  .prose blockquote::before {
    content: '';
    position: absolute;
    top: theme(spacing.2);
    left: theme(spacing.2);
    width: theme(spacing.1);
    height: calc(100% - theme(spacing.4));
    background-color: black;
  }

  /* Custom list item markers */
  .prose ul>li::before {
    @apply content-[''] absolute left-0 top-3 w-3 h-3 bg-teal-green border-2 border-black/50;
  }

  /* Custom ordered list styling */
  .prose ol>li {
    counter-increment: item;
  }

  .prose ol>li::before {
    content: counter(item);
    @apply absolute left-0 top-1 w-6 h-6 rounded-full bg-light-blue/80 border-3 border-black/50 grid place-items-center leading-none text-base font-bold text-black/80;
  }

  /* Reset counter for nested ordered lists */
  .prose ol ol {
    counter-reset: item;
  }
}